<template>
    <div>
        <div class="page-infinite-wrapper" ref="wrappers" :style="{ height: wrapperHeight + 'px' }" v-if="!noData">
            <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="50">
                <li v-for="(item, index) in list" class="page-infinite-listitem flex-layout" @click="goOtherHomePage(index)">
                    <Avatar :avatar="item.avatar" :name="item.name"></Avatar>
                    <span class="yousport-name">{{item.name}}</span>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
        <div class="no-data-priase no-data page-infinite-wrapper" v-if="noData">
            <div class="circle">
                <img src="../assets/img/no-prise.png" alt="暂无点赞">
            </div>
            <p>暂无人点赞</p>
        </div>

    </div>

</template>

<script>
    import util from '../assets/util'
    import config from '../assets/config.js'
    import Avatar from './ys-avatar.vue'

    export default {
        components:{
           Avatar
        },
        data() {
            return {
                list: [],
                loading: false,
                wrapperHeight: 0,
                noData:false,
                isFinished:false,
                listUrl: config.host + config.praiseList,
                pageInfo: {
                    page: 1,
                    size:20
                }
            };
        },

        props:{

        },

        activated(){
            this.initData();
        },

        methods: {
            goOtherHomePage(i){
                let rowData = this.list[i];
                let userInfo = util.session.get('sport-user-info');
                util.session.set('rowData',rowData);
                if(userInfo.memberId === rowData.memberId) {
                    this.$router.push({path:'/myHomePage'});
                } else {
                    this.$router.push({path:'/otherHomePage'});
                }
            },
            initData() {
                var res = util.session.get('praise-row-data');
                this.pageInfo.memberId = res.memberId;
                this.pageInfo.fromId = res.id;
                this.pageInfo.page = 1;

                this.loading = true;
                this.$http.get(this.listUrl, {
                    params:this.pageInfo
                }).then((res) => {
                    this.loading = false;
                    this.list = res.data.list;
                    let length = this.list.length;
                    if(!length) {
                        this.noData = true;
                    }
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.loading = false;
                    } else {
                        this.isFinished = false;
                        this.pageInfo.page ++;
                    }

            }).catch((res) => {
                    this.loading = false;
            });
            },
            loadMore() {
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.listUrl, {
                    params:this.pageInfo
                }).then((res)=>{
                    let resList = res.data.list;
                    let length = resList.length;
                    this.list = this.list.concat(res.data.list);
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.loading = false;
                    } else {
                        this.pageInfo.page ++;
                        this.loading = false;
                    }

                }).catch((res) => {
                    this.loading = false;
                });
            }
        },

        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight;
        }
    };
</script>
<style>
    .page-infinite-list{
        background: #fff;
    }
     .page-infinite-listitem{
        display:flex;
        align-items:center;
        height: 60px;
        border-bottom: solid 1px #EDEDED;
        text-align: center;
        list-style-type: none;
    }
     .page-infinite-list li:first-child{
        border-top: solid 1px #EDEDED;
    }
     .yousport-per-icon{
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 15px;
    }
     .yousport-name{
        float: left;
        color: #262626;
        font-size: 16px;
        margin-left: 10px;
    }
    
     .page-infinite-loading{
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
     .page-infinite-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    .no-data-priase {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        background: #f5f5f5;
    }
</style>
